<template>
  <div class="my-drag">
    <span v-for="(name, i) in icons" :key="i" :data-index="i">
      <!-- {{ name }} -->
      <SvgIcon :iconClass="name" class="icon-item"></SvgIcon>
    </span>
    <div class="zw" ref="zw"></div>
  </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon";
export default {
    components: { SvgIcon },
  data() {
    return {
      icons: ["三明治", "刨冰", "咖啡"],
      index: 0,
    };
  },
  mounted() {
    // 给每个图标添加拖拽事件
    this.infoFn();
  },
  methods: {
    infoFn() {
      let childNodes = Array.from(this.$el.childNodes);
      let zw = childNodes.pop();
      let icons = childNodes;
      console.log(icons);
      console.log(zw);

      document.addEventListener("mousedown", (e) => {
        this.index = e.target.dataset.index;
        console.log(e.target.dataset.index);
        if (this.index && this.isDrag) {
            this.$el.childNodes[this.index].setAttribute(
                "style",
                "position:fixed;top:0;left:0"
            );
        }else{
            console.log('未选择拖拽目标')
        }
      });
    },
    move(el, x, y) {
      el.setAttribute("style", `position:absolute;left:${x}px;top:${y}px;`);
     //将当前拖拽的元素放到最上面
      el.style.zIndex = 999;
      
    //   切换占位的图标zw到当前位置
    // this.zw.$el
    },
  },
};
</script>

<style lang="less" scoped>
.my-drag {
  display: flex;
}
.icon-item {
  font-size: 100px;
}
.zw {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #ccc;
  font-size: 100px;
  display: none;
}
</style>